<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import useOptions from '@/hooks/useOptions'
type List = {
  address: {
    address: string
    city: string
    consignee: string
    district: string
    id: number
    isDefault: number
    lat: string
    lng: string
    mobile: string
    name: string
    province: string
    sellerId: number
  }
  addressId: number
  pickOpenDate: string
  pickOpenTime: string
  verifyId: string
}
const props = defineProps<{
  show: boolean
  info: List
}>()

const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { options: userList } = useOptions({
  api: '/server-shop/sys-seller/seller/verify/list',

  fieldName: {
    label: 'userNickName',
    value: 'userId',
  },
})
const { options } = useOptions({
  api: '/server-shop/sys-seller/seller/address/list',
})
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  addressId: '',
  pickOpenDate: '',
  pickOpenTime: '',
  verifyId: [] as any,
  verifyName: '',
  address: {
    name: '',
  },
})
const submit = () => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      query.verifyId = query.verifyId.filter(Boolean).join(',')
      console.log('🚀 ~ submit ~ query:', query)
      emit('confirm', query)
      emit('update:show', false)
    }
  })
}
onMounted(() => {
  if (props.info) {
    Object.assign(detail, props.info)
    detail.verifyId = props.info.verifyId?.split(',') || []
  }
})
const onChange = data => {
  const [item] = options.value.filter(f => f.id == data)
  detail.address.name = item.label
}
const onChangeUser = ids => {
  const list = userList.value.filter(user => ids.includes(user.userId))
  console.log('🚀 ~ list:', list)
  detail.verifyName = list.map(item => item.userNickName).join(',')
}
</script>
<template>
  <CDrawer v-model:visible="props.show" @ok="submit" :mask-closable="false" width="500px" title="编辑" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item label="选择地址" field="addressId" :rules="[{ required: true, message: '请选择地址' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="detail.addressId" placeholder="请选择" :options="options" @change="onChange" />
        </a-form-item>
        <a-form-item label="选择核销员" field="verifyId" :rules="[{ required: true, message: '请选择核销员' }]" :validate-trigger="['change', 'blur']">
          <a-select placeholder="请选择" multiple v-model="detail.verifyId" @change="onChangeUser" :options="userList"></a-select>
        </a-form-item>
        <a-form-item field="pickOpenDate" label="营业时间段" :rules="[{ required: true, message: '请输入营业时间段' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.pickOpenDate" placeholder="示例：周一 - 周五" />
        </a-form-item>
        <a-form-item field="pickOpenTime" label="营业时间段" :rules="[{ required: true, message: '请输入营业时间段' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.pickOpenTime" placeholder="示例：09:00 - 12:00" />
        </a-form-item>
      </a-form>
    </div>
  </CDrawer>
</template>
<style lang="less" scoped></style>
